<template>
  <div class='InterfaceBuyWrapper'>
    <top></top>
    <div class="interfaceDescContent">
        <div class="interfaceDescMiddle">
            <div class="oneLeftWrapper">
                <div class="Oneleft">
                    <div class="indescLeft" >
                        <div class="indescImage" :style="{backgroundImage:`url(${imageUrl})`}">
                        </div>
                    </div>
                    <div class="descContentLeft">
                        <div class="indescTitle">
                            天气预报
                        </div>
                        <div class="desc">
                            <p>
                            数据来源于国家气象局发布的数据,可根据地区名称、经纬度、IP查询对应地区的天气预报。 包括天气预警、白天晚上的温度、湿度、风速、风力，一氧化碳、二氧化氮等PM 2.5空气质量指数，穿衣、出行、洗车等生活指数。7天天气范围的预报每天更新3次，分别是7:3
                            </p>
                        </div>
                        <div class="dataNum">
                            <div class="dataCount">
                                <p>
                                    浏览量：<span class="browseSpan">857537</span>
                                    <span style="margin-left: 50px">使用人数： <span class="userSpan">169040</span></span>
                                </p>
                                <p>
                                    调用量：<span class="useSpan">4884596436</span>
                                </p>
                            </div>
                            <div class="dataPrice">
                                ¥ <span> 0.01 </span>元起
                            </div>
                        </div>
                        <div class="buttonWrapper">
                            <button class="btnOne" @click="handleInterfaceDesc()">返回接口详情</button>
                            <button class="btnTwo" @click="handleViewTest()">查看演示</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mealWrapper">
        <div class="mealMiddle">
            <div class="mealIntroduce">
                套餐介绍（包月）
            </div>
            <div class="mealTable">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="套餐名称">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="调用频率">
                    </el-table-column>
                    <el-table-column
                    prop="case"
                    label="金额">
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">立即订购</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <div class="mealWrapper">
        <div class="mealMiddle">
            <div class="mealIntroduce">
                套餐介绍（计次）
            </div>
            <div class="mealTable">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="套餐名称">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="调用频率">
                    </el-table-column>
                    <el-table-column
                    prop="case"
                    label="金额">
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">立即订购</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import star01Image from '@/assets/img/home/star01.png'
import star02Image from '@/assets/img/home/star02.png'
import star03Image from '@/assets/img/home/star03.png'
import star04Image from '@/assets/img/home/star04.png'
import star05Image from '@/assets/img/home/star05.png'
import Top from '@/components/top/top.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'InterfaceBuy',
  data () {
    return {
      tableData: [
        {
          name: '2016-05-02',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1518 弄',
          must: '是',
          desc: '2121'
        },
        {
          name: '2016-05-04',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1517 弄',
          must: '是',
          desc: '2121'
        },
        {
          name: '2016-05-01',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1519 弄',
          must: '是',
          desc: '2121'
        },
        {
          name: '2016-05-03',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1516 弄',
          must: '是',
          desc: '2121'
        }
      ],
      selectApiPoint: '1',
      conmmendImage: star01Image,
      imageUrl: star02Image,
      star01Image,
      star03Image,
      star04Image,
      star05Image,
      APIPointList: [
        {
          name: '1',
          title: '坐标-->查询天气'
        },
        {
          name: '2',
          title: 'IP-->查询天气'
        },
        {
          name: '3',
          title: '地名-->查询天气'
        },
        {
          name: '4',
          title: 'ID或名称-->查询24小时天气预报'
        },
        {
          name: '5',
          title: 'ID或名称-->查询查未来15天预报'
        },
        {
          name: '6',
          title: 'ID或名称-->查询24小时天气预报'
        },
        {
          name: '7',
          title: 'ID或名称-->查询查未来15天预报'
        }
      ]
    }
  },
  mounted () {
  },
  components: {
    Top,
    Footer
  },
  created () {
  },
  methods: {
    handleSelect (name) {
      this.selectApiPoint = name
    },
    handleInterfaceDesc () {
      this.$router.push('/interfacedesc')
    },
    handleViewTest () {
      this.$router.push('/interfacetest')
    },
    handleDelete (index, row) {
      this.$router.push('/interfaceorder')
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.InterfaceBuyWrapper {
    background-color white
    .interfaceDescContent {
        margin-top 20px
        .interfaceDescMiddle {
            display flex
            justify-content space-between
            width 1200px
            margin 0 auto
            padding 20px 20px
            .oneLeftWrapper {
                .Oneleft {
                    display flex
                    .indescLeft {
                        height 133px
                        border 1px solid #ececec
                        padding 30px 20px
                        .indescImage {
                            width 128px
                            height 128px
                            background-repeat no-repeat
                            background-size cover
                        }
                    }
                    .descContentLeft {
                        margin-left 20px
                        .indescTitle {
                            font-size 20px
                            font-weight bold
                        }
                        .desc {
                            margin-top 20px
                            font-size 12px
                            color #999
                            p {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                            }
                        }
                        .dataNum {
                            display flex
                            margin-top 15px
                        .dataCount {
                            padding-right 30px
                            border-right-style solid
                            border-width:1px
                            border-color: #E4E4E4
                            font-size 12px
                            .browseSpan {
                                color $color-theme
                            }
                            .userSpan {
                                color #17cec8
                            }
                            .useSpan {
                                color #65acda
                            }
                        }
                        .dataPrice {
                            padding-left 30px
                            color $color-theme
                            span {
                                font-size 24px
                            }
                        }
                        }
                        .buttonWrapper {
                            margin-top 41px
                            .btnOne {
                                cursor pointer
                                color: white
                                padding 5px 20px
                                border: solid 1px #E0E0E0;
                                border-radius 3px
                                background-color: $color-theme
                                &:focus {
                                outline: none
                                }
                            }
                            .btnTwo {
                                cursor pointer
                                color: white;
                                padding 5px 20px
                                border: solid 1px #E0E0E0;
                                border-radius 3px
                                background-color: #65ACDA;
                                &:focus {
                                outline: none
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .mealWrapper {
        margin-top 20px
        margin-bottom 50px
        .mealMiddle {
            border-top-style solid
            border-width:1px
            border-color: #EBEEF5
            width 1200px
            margin 0 auto
            .mealIntroduce {
                text-align center
                padding 20px 0px
                font-size 20px
                color #20a0ff
            }
        }
    }
}
</style>
